<template>
  <el-container>
    <el-aside>
      <el-card class="box-card margin-12 show-box border-radius-4">
        <el-row>
          <el-col style="text-align: center;margin-top:20px;">
            <el-avatar :size="150" :src="userInfo.avatar" />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20" :offset="2" class="userid">
            <span>用户ID：</span>{{ userInfo.user_id }}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20" :offset="2" class="nickname">
            <span>昵称：</span>{{ userInfo.nickname }}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20" :offset="2" class="intro">
            <span>简介：</span>{{ userInfo.introduction }}
          </el-col>
        </el-row>
      </el-card>
    </el-aside>
    <el-main>
      <el-card class="box-card mr-12 mt-12 show-box border-radius-4">
        <el-tabs v-model="activeName" type="card" class="demo-tabs">
          <el-tab-pane label="详细信息" name="0">
            <el-form label-position="right" label-width="100px" :model="formLabelAlign" ref="ruleFormRef"
              :rules="rules">
              <el-form-item label="真实姓名">
                <el-input v-model="formLabelAlign.realname" disabled />
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="formLabelAlign.email" :disabled="isDisabled" clearable />
              </el-form-item>
              <el-form-item label="手机号码" prop="phone">
                <el-input v-model="formLabelAlign.phone" :disabled="isDisabled" clearable />
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="formLabelAlign.password" :disabled="isDisabled" type="password" clearable
                  show-password />
              </el-form-item>
              <el-form-item label="确认新密码" prop="repassword">
                <el-input v-model="formLabelAlign.repassword" :disabled="isDisabled" type="password" clearable
                  show-password />
              </el-form-item>
              <el-form-item label="简介">
                <el-input v-model="formLabelAlign.introduction" :disabled="isDisabled" type="textarea" clearable
                  maxlength="150" :show-word-limit="true" :rows="3" :autosize="{ maxRows: 3, minRows: 3 }" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="modifyInfo()">修改信息</el-button>
                <el-button @click="submitInfo(ruleFormRef)" v-show="!isDisabled">提交</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import useGlobalStore from '../../store/modules/global';
import { modifyUserInfoById } from '../../api/user'

const globalStore = useGlobalStore()

//用户信息
// const userInfo = ref({
//   id: 123456,
//   avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
//   nickname: '爱吃梅子的猫',
//   introduction: '月色与雪色之间你是第三种角色，日月星辉之间你是第四种难得。'
// })
//
const userInfo:any = globalStore.userInfo
const activeName = ref('0')
const formLabelAlign = reactive({
  realname: 'xxxx',
  email: '2232@11.com',
  phone: '123456789',
  password: '213213',
  repassword: '',
  introduction: '月色与雪色之间你是第三种角色，日月星辉之间你是第四种难得。'
})
//是否可以编辑
const isDisabled = ref(true)
const ruleFormRef = ref<FormInstance>()
onMounted(() => {
  setInfoByStore()
})
//邮箱验证
const validateEmail = (rules: any, value: any, callback: any) => {
  console.log('rules: ', rules);
  const reg = new RegExp(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/)
  if (value === '') {
    callback(new Error('请输入邮箱'))
  } else {
    if (!reg.test(value)) {
      callback(new Error('邮箱格式不正确，请更改输入'))
    }
    callback()
  }
}
//手机号码验证
const validatePhone = (rules: any, value: any, callback: any) => {
  console.log('rules: ', rules);
  const reg = new RegExp(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/)
  if (value === '') {
    callback(new Error('请输入手机号'))
  } else {
    if (!reg.test(value)) {
      callback(new Error('手机号不正确，请更改输入'))
    }
    callback()
  }
}
//密码验证
const validatePassword = (rules: any, value: any, callback: any) => {
  console.log('rules: ', rules);
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    callback()
  }
}
//再次验证密码
const validateRepassword = (rules: any, value: any, callback: any) => {
  console.log('rules: ', rules);
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (value !== formLabelAlign.password) {
      callback(new Error('两次输入的密码不一致，请检查输入'))
    }
    callback()
  }
}
//表单验证规则
const rules = reactive({
  email: [{ validator: validateEmail, trigger: 'blur' }],
  phone: [{ validator: validatePhone, trigger: 'blur' }],
  password: [{ validator: validatePassword, trigger: 'blur' }],
  repassword: [{ validator: validateRepassword, trigger: 'blur' }],
})

//点击修改信息
const modifyInfo = () => {
  isDisabled.value = false
}
//提交信息
const submitInfo = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid) => {
    if (valid) {
      const result = await modifyUserInfoById({
        //@ts-ignore
        user_id: globalStore.userInfo.user_id,
        email: formLabelAlign.email,
        phone: formLabelAlign.phone,
        password: formLabelAlign.password,
        introduction: formLabelAlign.introduction
      })
      //@ts-ignore
      if (result.code == 1) {
        ElMessage({
          message: '修改成功',
          type: 'success',
        })
        globalStore.setUserInfo(result.data)
      setInfoByStore()
      isDisabled.value = true
      }
    } else {
      return
    }
  })
}
//根据store里面的用户信息赋值
const setInfoByStore = () => {
  // //用户信息
    //修改的信息
    //@ts-ignore
    formLabelAlign.realname = globalStore.userInfo.realname,//@ts-ignore
    formLabelAlign.email = globalStore.userInfo.email,//@ts-ignore
    formLabelAlign.phone = globalStore.userInfo.phone,//@ts-ignore
    formLabelAlign.password = globalStore.userInfo.password,//@ts-ignore
    formLabelAlign.introduction = globalStore.userInfo.introduction
}
</script>

<style lang="less" scoped>
.el-aside,
.el-main {
  height: calc(100vh - 100px);
  padding: 0;
}

.el-aside {
  width: 30%;

  .box-card {
    height: 80%;
    // margin: 10% 20px 20px 20px;
    font-size: 20px;

    span {
      font-weight: bold;
    }

    .userid,
    .nickname,
    .intro {
      height: 50px;
      line-height: 50px;
    }

    .userid {
      margin-top: 20px;
    }
  }
}

.el-main {
  .box-card {
    height: 80%;

    .demo-tabs>.el-tabs__content {
      padding: 32px;
      color: #000;
      font-size: 32px;
      font-weight: 600;
    }
  }
}
</style>